
<template>
  <van-field
    :value="value"
    @input="change"
    :type="type ? 'password' : 'text'"
    :name="name"
    center
    clearable
    :label="label"
    :placeholder="placeholder"
    :rules="[
      { required: true, message: '请填写密码' },
      { pattern: reg.pwd, message: '请输入正确的密码(6-16位数字字母)' },
      ...rules,
    ]"
    left-icon="browsing-history-o"
    :right-icon="!type ? 'eye-o' : 'closed-eye'"
    @click-right-icon="changeType"
    @blur="$emit('blur')"
  />
</template>

<script>
export default {
  data() {
    return {
      type: true,
    };
  },
  model: {
    prop: "value",
    event: "changevalue",
  },
  props: {
    rules: {
      type: Array,
      default() {
        return [];
      },
    },
    value: String,
    form: {
      type: Object,
    },
    name: {
      type: String,
      default: "password",
    },
    label: {
      type: String,
      default: "密码",
    },
    placeholder: {
      type: String,
      default: "密码",
    },
  },
  methods: {
    change(val) {
      this.$emit("changevalue", val);
    },
    changeType() {
      this.type = !this.type;
    },
  },
};
</script>